<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/calendar/moment.min.js"></script>

    <!-- 控制用户是否登录 -->
    <!--    <script src="js/loginStatus.js"></script>-->
    <style>
        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        .table tr:first-child {
            background-color: #e2e2e2;
            font-weight: 600;
        }

        .tab-content {
            padding-top: 24px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <ul class="nav nav-tabs" id="orderTabs">
                <li class="active"><a id="0" href="#unpayOrders" class="ding">未支付订单</a></li>
                <li><a id="1" href="#payOrders" class="ding">已支付订单</a></li>
                <li><a id="2" href="#calOrders" class="ding">已取消订单</a></li>
            </ul>
            <div class="tab-content" id="app">
                <div id="unpayOrders" class="tab-pane active">
                    <table class="table" v-for="order in unpayedOrders" id="money" >
                        <tr>
                            <td colspan="3">订单日期:{{order.oCreateTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{order.orderNo}}</td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" src="images/mi.png">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="">商品名:{{o.oGoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>价格：{{o.oGoodPrice}}元</td>
                            <td>数量：{{o.oNum}}</td>
                        </tr>
                        <tr>
                            <td>
                                <span>总金额：{{order.orderMoney}}元</span>
                            </td>
                            <td></td>
                            <td></td>
                            <td >
                                <button class="btn btn-primary" style="float: right" onclick="updateCancelOrder(this)"
                                        :orderId="order.orderNo">取消订单
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger" style="float: right" onclick="gotoSettleCount(this)"
                                        :orderId="order.orderNo" :orderAmout="order.orderMoney">继续支付
                                </button>
                            </td>
                        </tr>

                    </table>
                    <div id="payOrders" class="tab-pane active">
                        <table class="table" v-for="order in payedOrders">
                            <tr>
                                <td colspan="3">订单日期: {{order.oCreateTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号: {{order.orderNo}}</td>
                            </tr>
                            <tr v-for="o in order.orders">
                                <td style="max-width: 200px;">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="javascript: void(0);">
                                                <img class="media-object" height="80px" width="62px" src="images/mi.png">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">商品名:{{o.oGoodTitle}}</h4>
                                        </div>
                                    </div>
                                </td>
                                <td>价格:{{o.oGoodPrice}}元</td>
                                <td>数量:{{o.oNum}}</td>
                            </tr>

                            <tr>
                                <td><span>总金额：{{order.orderMoney}}元</span></td>

                            </tr>
                        </table>
                    </div>
                    <div id="calOrders" class="tab tab-pane active">
                        <table id="orderList-table" class="table" v-for="order in cancelOrders">
                            <tr>
                                <td colspan="3">订单日期:{{order.createTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{order.orderNo}}</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr v-for="o in order.orders">
                                <td style="max-width: 200px;">
                                    <div class="media">
                                        <div class="media-left">
                                            <a href="javascript: void(0);">
                                                <img class="media-object" height="80px" width="62px" src="images/mi.png">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">商品:{{o.oGoodTitle}}</h4>
                                        </div>
                                    </div>
                                </td>
                                <td>价格:{{o.oGoodPrice}}元</td>
                                <td>数量:{{o.oNum}}</td>
                            </tr>
                            <tr>
                                <td><span>总金额：{{order.orderMoney}}元</span></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!--   <div id="payedOrders" class="tab-pane">
                       <h1>已支付订单</h1>
                   </div>
                   <div id="expiredOrders" class="tab-pane">
                       <h1>取消订单</h1>
                   </div>-->
            </div>
        </div>
    </div>
</div>
</body>

<script>
    Vue.filter('formatDate', function (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    })



    var vm = new Vue({
        el: '#app',
        data: {
            unpayedOrders: [], //未支付订单
            payedOrders: [], //已支付订单
            cancelOrders: [],//已取消订单
        }
    })

    /*
    {"oId":44,"oNo":"20200526152643443224802",
    "oGoodPrice":6599.00,
    "oNum":1
    "oStatus":2,
    "oAppraiseStatus":0,
    "oUserId":28,
    "oCreateTime":1590478003000,
    "oPayTime":null,
    "oGoodId":"1001",
    "oGoodImg":"mobile/apple.jpg",
    "oGoodTitle":"Apple iPhone XS Max (A2104) 64GB 金色 移动联通电信4G手机 双卡双待"}
    ,{"oId":45,"oNo":"20200526152643443224802","oGoodPrice":429.00,"oNum":1,"oStatus":2,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590478003000,"oPayTime":null,"oGoodId":"1013","oGoodImg":"shoes/adidas.jpg","oGoodTitle":"Adidas阿迪达斯neo女鞋 2019秋冬 低帮运动鞋百搭小白鞋轻便舒适休闲鞋滑板鞋B42096 B42099/HOOPS 2.0 MID 秋"},{"oId":46,"oNo":"20200526152643443224802","oGoodPrice":48722.00,"oNum":2,"oStatus":2,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590478003000,"oPayTime":null,"oGoodId":"1014","oGoodImg":"bags/channel.jpg","oGoodTitle":"Chanel 香奈儿女"},{"oId":47,"oNo":"20200526152643443224802","oGoodPrice":62.10,"oNum":2,"oStatus":2,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590478003000,"oPayTime":null,"oGoodId":"1018","oGoodImg":"bookes/jvm.jpg","oGoodTitle":"深入理解 Java 虚拟机：JVM高级特性与最佳实践（第2版）"},{"oId":48,"oNo":"20200526152856272257576","oGoodPrice":6210.00,"oNum":1,"oStatus":1,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590478136000,"oPayTime":1590479611000,"oGoodId":"1009","oGoodImg":"computer/mac_air.jpg","oGoodTitle":"Apple MacBook Air 13.3 | Core i5 8G 128G SSD 笔记本电脑 轻薄本 银色 MQD32CH/A"},{"oId":49,"oNo":"20200526152856272257576","oGoodPrice":59.00,"oNum":1,"oStatus":0,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590478136000,"oPayTime":1590479611000,"oGoodId":"1015","oGoodImg":"bookes/scw.jpg","oGoodTitle":"沈从文经典书籍：慢慢走走又停停+往昔之梦+我喜欢你（京东共3册）"},{"oId":50,"oNo":"20200526163241499679696","oGoodPrice":4899.00,"oNum":1,"oStatus":1,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590481962000,"oPayTime":1590482285000,"oGoodId":"1002","oGoodImg":"mobile/huawei.jpg","oGoodTitle":"华为 HUAWEI Mate 30 Pro 麒麟990旗舰芯片OLED环幕屏双4000万徕卡电影四摄8GB+128GB星河银4G全网通手机"},{"oId":51,"oNo":"20200528114734332235442","oGoodPrice":2199.00,"oNum":1,"oStatus":1,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590637654000,"oPayTime":1590637656000,"oGoodId":"1003","oGoodImg":"mobile/mi.png","oGoodTitle":"Redmi K20Pro 尊享版 骁龙855Plus 索尼4800万超广角三摄 AMOLED弹出式全面屏 12GB+512GB 酷黑机甲 游戏智能手机 小米 红米"},{"oId":52,"oNo":"20200528114853051621598","oGoodPrice":36.80,"oNum":1,"oStatus":2,"oAppraiseStatus":0,"oUserId":28,"oCreateTime":1590637733000,"oPayTime":null,"oGoodId":"1020","oGoodImg":"bookes/152915188917900QVZVR7uGAeoxBf3ZMQ.jpg","oGoodTitle":"局外人（诺奖得主作品）"}
     */

        function updateCancelOrder(banTag){
            var no = $(banTag).attr('orderId')
            console.log(no)
            $.ajax({
                url: 'http://localhost:8080/orders/deleteById/'+no,
                type:'get',
                dataType:'json',
              //  data:{no:no , status : 2}
            });
            getOrders(0);
        }

    function getOrders(status) {

        $.ajax({
            url: 'http://localhost:8080/orders/getOrdersByStatus/'+status+'/'+28,
            type: 'get',
            dataType: 'json',
            data: {status: status},
            success: function (_data) {

                let  el1 = vm.el
                var status;
                    if (_data[0] == null){
                        return;
                    }
                    status = _data[0].orders[0].oStatus;
                    if ('2' == status) {

                        vm.el = el1

                        //已取消订单
                        console.log("已取消订单")
                        vm.unpayedOrders=[]
                        vm.payedOrders=[]
                        for (var i = 0; i < _data.length; i++) {
                        vm.cancelOrders.push(_data[i]);

                        }

                    } else if ('1' == status) {
                        vm.el = el1

                        //已支付订单
                        console.log("已支付订单")
                        vm.unpayedOrders = [];
                        vm.cancelOrders = [];
                        for (var i = 0; i < _data.length; i++) {
                        vm.payedOrders.push(_data[i]);}
                    } else {
                        vm.el = el1
                        //未支付订单
                        console.log("未支付订单")
                        vm.payedOrders = []
                        vm.cancelOrders = []
                        for (var i = 0; i < _data.length; i++) {
                        vm.unpayedOrders.push(_data[i]);}
                    }
            }

        })
    }
    //默认获取未支付订单
    getOrders(0);

    //当用户点击的时候触发
    $('#orderTabs a').click(function () {
        if ($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            vm.unpayedOrders.reo
            getOrders(status);
            $(this).tab('show'); //让对应的tab展示
        }
    })

    //点击继续支付带订单数据跳转结算页面
        function gotoSettleCount(btnTag) {
            var orderNo = $(btnTag).attr('orderId');
            var amount = $(btnTag).attr('orderAmout');
            console.log(orderNo+"-----",amount)
        }

</script>
</html>